<template>
    <div class="newsinfo-container">
      <h3 class="title">{{lists.name}}</h3>
      <p class="subtitle">
        <span>发表时间:</span>
        <span>点击：0次</span>
      </p>
      <hr/>
      <div class="content" >
            {{id}}
      </div>
     <!--评论区-->
     <div>
        <comment-box :id="this.id"></comment-box>
     </div>
    </div>
</template>
<script>
//导入评论子组件
import comment from '../subcomponents/comment.vue';
 import {Toast} from 'mint-ui'
   export default{
       data(){
           return{
               id:this.$route.params.id,
               lists:[]
           };
       },
       created(){
           this.getNewsInfo();
       },
       methods:{
           getNewsInfo(){
             this.$http.get("http://php.dev/mysql2.php"+this.id).then(result=>{
                if(result.status==200){
                    this.lists=result.body[0];
                    Toast("数据加载成功");
                }
                else{
                    Toast("数据加载失败");
                }
             });
             }
               
         },
         components:{
             'comment-box':comment
         }
 }
   
</script>
<style>
    .newsinfo-container{
        padding: 0 4px;

        .title{
            font-size:16px;
            text-align:center;
            margin:15px 0;
            color:red;
        }
        .subtitle{
            font-size:13px;
            color:blue;
            display:flex;
            justify-content:space-between;
        }
        .content{}
        
    }
</style>